<template>
  <div>
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="tableData"
      :scroll="{ x: 800, y: 470 }"
      :pagination="{
        simple: true,
        pageSize: 10,
      }"
    >
      <template #title="{ text }">
        <a>{{ text }}</a>
      </template>
      <template #customTitle>
        <span>
          <iconpark-icon :name="type"></iconpark-icon>
          标题
        </span>
      </template>
      <template #amount="{ record: tags }">
        <a-tag color="green"> {{ tags.amount }} </a-tag>
      </template>
      <template #filterDropdown>
        <div>
          <a-range-picker
            valueFormat="YYYY-MM-DD"
            @change="filterOnChange"
            v-model:value="timePeriod"
            :locale="locale"
          >
            <template #suffixIcon> 11 </template>
          </a-range-picker>
          <a-button type="primary" size="small" @click="tableFilterReset()">
            重置
          </a-button>
        </div>
      </template>
      <template #filterIcon>
        <iconpark-icon name="income" />
      </template>
      <template #payType="{ text }">
        <span>
          {{ text == 0 ? "微信" : text == 1 ? "支付宝" : text == 2 ? "花呗" : "银行卡" }}
        </span>
      </template>
      <template #action="{ record }">
        <a-popconfirm title="是否删除?" @confirm="onDelete(record)">
          <a-button type="default" shape="circle">
            <template #icon><iconpark-icon name="delete"></iconpark-icon></template>
          </a-button>
        </a-popconfirm>
        <a-button type="default" shape="circle" class="ml-1" @click="onupdate(record)">
          <template #icon><iconpark-icon name="update"></iconpark-icon></template>
        </a-button>
      </template>
    </a-table>
    <Edit v-if="visible" :Visible="visible" :List="list" @close="close" />
  </div>
</template>
<script>
import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import Edit from "@/views/life/admin/rmb/Edit.vue";
const columns = [
  {
    dataIndex: "title",
    width: 100,
    slots: { title: "customTitle", customRender: "title" },
    fixed: "left",
  },
  {
    title: "金额",
    dataIndex: "amount",
    width: 100,
    slots: { customRender: "amount" },
    fixed: "left",
  },
  {
    title: "支付方式",
    width: 100,
    dataIndex: "payType",
    slots: { customRender: "payType" },
  },
  {
    title: "何事",
    dataIndex: "incident",
  },
  {
    title: "具体时间",
    dataIndex: "outTime",
    slots: {
      filterDropdown: "filterDropdown",
      filterIcon: "filterIcon",
    },
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    fixed: "right",
    width: 150,
    slots: { customRender: "action" },
  },
];

export default defineComponent({
  props: { type: String },
  components: {
    Edit,
  },
  setup(props) {
    const { proxy } = getCurrentInstance();
    const tableData = ref([]);
    const count = ref(0);
    const timePeriod = ref(["", ""]);
    const visible = ref(false);
    const list = ref(null);
    onMounted(() => {
      getList(proxy.type, timePeriod.value);
    });
    function getList(type, time) {
      visible.value = false;
      count.value = 0;
      proxy.$api
        .get("rmb/getForMonth?type=" + type + "&time1=" + time[0] + "&time2=" + time[1])
        .then((res) => {
          console.log(res);
          if (res.error === 0) {
            tableData.value = res.message;
            res.message.forEach((data) => {
              count.value += data.amount;
            });
            proxy.$emit("count", count.value);
          } else message.error(res.message);
        });
    }
    const onDelete = (e) => {
      proxy.$api.post("rmb/del", e).then((res) => {
        console.log(res);
        if (res.error === 0) {
          message.success(res.message);
          getList(proxy.type, ["", ""]);
        } else message.error(res.message);
      });
    };
    const onupdate = (e) => {
      visible.value = true;
      list.value = e;
    };
    const filterOnChange = (e) => {
      getList(proxy.type, timePeriod.value);
    };
    const tableFilterReset = () => {
      timePeriod.value = ["", ""];
      getList(proxy.type, ["", ""]);
    };
    const close = () => {
      visible.value = false;
      getList(proxy.type, ["", ""]);
    };
    return {
      locale,
      tableData,
      columns,
      timePeriod,
      visible,
      list,
      onDelete,
      onupdate,
      getList,
      filterOnChange,
      tableFilterReset,
      close,
    };
  },
});
</script>
